const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: "js/[name].bundle.js",
    path: resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      /**
       * js 兼容性处理：babel-loader @babel/preset-env @babel/core
       * 1. @babel/preset-env 只能转换基本语法，不能转换如Promise的高级语法
       *
       * 2. 全部js兼容性处理 --> @babel/polyfill （不推荐）
       *      下完@babel/polyfill，在index.js 中直接引入即可，不用配置。import "@babel/polyfill"
       *      缺点：有关js的兼容处理全部引入，打包后的js非常大
       *
       * 3. 按需加载： --> core-js
       *
       *
       * */
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/,
        options: {
          presets: [
            [
              '@babel/preset-env',
              {
                // 按需加载
                useBuiltIns: 'usage',
                corejs: {
                  version: 3,
                },
                targets: {
                  chrome: '60',
                  firefox: '60',
                  ie: '9',
                  safari: '10',
                  edge: '17'
                }
              }
            ]
          ]

        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/template.html"
    })
  ],
  mode: "development"
}